<template>
  <view class="cont">
    <view class="listcat">
      <view class="listtitle">分类 :</view>
      <view class="listname">
        <cl-tabs :tabBars="listcat" active-color="orange" class="tabstitle"
          :active-style="{'font-size':'30rpx','font-weight':'bold'}" @tabChange="tabs" :tab-index="tabIndex" selectColor="#FF5722"></cl-tabs>
      </view>
    </view>
	<view class="listcat" v-if="listtag.length">
	  <view class="listtitle">标签 :</view>
	  <view class="listname">
	    <cl-tabs :tabBars="listtag" active-color="orange" class="tabstitle"
	      :active-style="{'font-size':'30rpx','font-weight':'bold'}" @tabChange="tag" :tab-index="tagIndex" selectColor="#FF5722"></cl-tabs>
	  </view>
	</view>
      <view class="listcat">
        <view class="listtitle">{{$t('book.zt')}} :</view>
        <view class="listname">
          <cl-tabs :tabBars="listhot" active-color="orange" class="tabstitle" @tabChange="hottabs" :tab-index="hotIndex" selectColor="#FF5722"></cl-tabs> 
        </view>
          </view> 
    <block >
      <view class="gridSm g1 bg" v-if="list.length>0">
        <uni-books-pai :data="item" v-for="(item,index) in list" :key="index" @flags="flag"></uni-books-pai>
      </view>
      <view  class="gridSm g1 bg iconfont" v-else>
        <text style="font-size:30rpx;">&#xe605;</text>
      <text>{{$t('book.dqlm')}}</text></view>  
    </block>
  </view> 
</template>
<script>
  import _list from '@/util/list.js';
  export default {
    data() {
      return {
        bottom: 100, //调整以控制组件距页面底部的距离,实际上是一个div遮罩层
        listcat: [],
		listtag:[],
        tabIndex:0, 
        hotIndex:0,
        list:[],
        limit:20,
        page:1,
        id:'',
		tagIndex:0,
        listhot:[{name:'全部',value:''},{name:'完本',value:1},{name:'连载',value:0}]
      }; 
    },
    onLoad(e) {
      let data = uni.getStorageSync('list_cat');
      this.id=e.id;
      this.tabIndex=parseInt(e.index)
      this.listcat = data
	  let listtag =uni.getStorageSync('list_tag')
	  if(listtag.length>0){
		listtag.unshift({'name':'全部', count: 219})
		this.listtag=listtag
	  }
	  if(this.listcat.length>0){
	  		this.listcat.unshift({'name':'全部'})
	  		
	  }
	  console.log(this.listcat)
      this.popup(0)
    },
    onReachBottom(){
      this.page=this.page+1
      this.popup()
      console.log(this.page)
    },
    methods: {
      tabs(e) {
       
        this.tabIndex=e
        this.page=1
        this.popup(1)
      },
	  tag(e) {
	   
	    this.tagIndex=e
	    this.page=1
	    this.popup(1)
	  },
      hottabs(e) {
        
        this.page=1
        this.hotIndex=e
        this.popup(1)
      },
      flag(e) {
		  console.log(e)
        uni.navigateTo({
          url: '/pages/book_mall/details?type=list&name=' + e.resourceName+'&author=' + e.author
        });
      },
      popup(is) {
        let _this=this;
		let tagname=this.listtag.length>0?this.listtag[this.tagIndex].name:''
		 console.log('-------',this.listcat[this.tabIndex].name,this.tabIndex)
     _list.categories(this.id,this.listcat[this.tabIndex].name,this.page,this.limit,this.listhot[this.hotIndex].value,tagname).then((res) => { 
		
        if(this.page>1){
        _this.list=_this.list.concat(res);
        }else{
        _this.list=res?res:[];
        }
     });

      }
    }
  };
</script>

<style lang="less">
  .cont{
    padding: 20rpx;
  }
.listcat{
  display: inline-flex;
  line-height: 80rpx;
}
.gridSm{
  margin-top: 30rpx;
}
.listtitle{
   display: inline-block;
   width: 100rpx;
   line-height: 85rpx;
   font-size: 28rpx;
   padding-left:10rpx ;
}
.listname{
  width:600rpx;
  }
.iconfont{
  text-align: center;
  margin-top:160rpx
}
</style>
